<template>
	<view class="container">
		<view class="content">
			<view class="title">{{ goodsName }}</view>
			<view class="line"></view>
			<view class="label">研学时间</view>
			<view class="timebox">
				<view
					:class="{ timeitem: true, check: t.id == currentId }"
					v-for="t in timeList"
					:key="t.id"
					@click="setCurrentId(t.id, t.storeName)"
					>{{ t.specName + ' | ' + t.specValue }}</view
				>
			</view>
			<!-- <view class="chcekbtnbox">
        <view class="label left">带队老师:</view>
        <view class="right">
          <image class="img" src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_decreace.png" mode="scaleToFill" @click="setNum(-1, 'teach')" />
          <view class="text">{{ teach }}位</view>
          <view class="plus" @click="setNum(1, 'teach')">+</view>
        </view>
      </view> -->
			<view class="chcekbtnbox">
				<view class="label left">研学学员:</view>
				<view class="right">
					<image
						class="img"
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_decreace.png"
						mode="scaleToFill"
						@click="setNum(-1, 'person')"
					/>
					<view class="text">{{ person }}位</view>
					<view class="plus" @click="setNum(1, 'person')">+</view>
				</view>
			</view>
		</view>
		<view class="chcekbtnbox moneybox" style="margin-top: 70rpx">
			<view class="label left">应付金额:</view>
			<view class="money">￥{{ price }}</view>
		</view>
		<view class="btnok" @click="toSubmit">提交订单</view>
	</view>
</template>
<script>
import indexApi from '@/api/yanxue/indexPage'
export default {
	data() {
		return {
			timeList: [],
			currentId: '',
			goodsName: '',
			teach: 1,
			person: 1,
			price: 0,
			timePrice: 0,
			scenObj: {},
			storeName: ''
		}
	},
	onLoad(options) {
		this.id = options.id
		this.scenObj = options
		this.projectDateListFunc(options.id)
		this.goodsName = options.goodsName
	},
	methods: {
		toSubmit() {
			let timeStr = this.timeList.find(x => x.id == this.currentId).specValue || ''
			let obj = {
				id: this.id,
				person: this.person,
				price: this.price,
				timeId: this.currentId,
				timeStr,
				timePrice: this.timePrice,
				...this.scenObj,
				storeName: this.storeName
			}
			this.$navTo('pagesA/yanxue/yanxue_submit', obj)
		},
		setCurrentId(id, storeName) {
			this.currentId = id
			this.storeName = storeName
		},
		setPrice() {
			let obj = this.timeList.find(e => e.id == this.currentId)
			this.timePrice = obj.price
			this.price = obj.price * this.person
		},
		setNum(num, type) {
			if (this[type] == 1 && num == -1) return
			this[type] = this[type] + num
			this.setPrice()
		},
		projectDateListFunc(id) {
			let API = indexApi.projectDateList
			if (!!this.scenObj.uid) {
				API = indexApi.projectDateListtwo
			}
			API({ id }).then(res => {
				if (res.result.length > 0) {
					this.timeList = res.result
					this.currentId = res.result[0].id
					this.storeName = res.result[0].storeName
					this.setPrice()
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(180deg, #c1f26d 0%, #ffffff 100%);
	padding: 20rpx 24rpx;
	.label {
		//   height: 32rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		margin-top: 22rpx;
	}
	.content {
		width: 702rpx;
		background: #ffffff;
		border-radius: 62rpx;
		overflow: hidden;
		height: 100vh;
		padding: 0 46rpx;
		.title {
			width: 534rpx;
			height: 51rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin: 36rpx auto 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical; /* 设置或继承对象的子元素排列方式 */
			-webkit-line-clamp: 1; /* 设置显示的行数 */
			overflow: hidden;
		}
		.line {
			width: 608rpx;
			height: 6rpx;
			background: #d5d5d5;
			margin: 0 auto;
		}
		.timebox {
			height: 60vh;
			overflow: scroll;
			margin-top: 30rpx;
			.timeitem {
				text-align: center;
				line-height: 70rpx;
				height: 69rpx;
				background: #efefef;
				border-radius: 34rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 20rpx;
			}
			.check {
				color: #fff;
				background: #f95513;
			}
		}
		.chcekbtnbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.left {
				margin-top: 0;
			}
			.right {
				width: 316rpx;
				height: 70rpx;
				background: #efefef;
				border-radius: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.img {
					width: 44rpx;
					height: 44rpx;
				}
				.text {
					width: 200rpx;
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 36rpx;
					color: #000000;
					text-align: center;
				}
				.plus {
					width: 44rpx;
					height: 44rpx;
					font-size: 24rpx;
					text-align: center;
					line-height: 36rpx;
					background: #f95513;
					border-radius: 50%;
					color: #fff;
					font-size: 50rpx;
				}
			}
		}
	}
	.moneybox {
		position: fixed;
		left: 64rpx;
		bottom: 140rpx;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		width: 620rpx;
		.money {
			//   width: 222rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 60rpx;
			color: #f4420a;
		}
	}
	.btnok {
		position: fixed;
		left: 52rpx;
		bottom: 64rpx;
		z-index: 9;
		width: 644rpx;
		height: 84rpx;
		background: #f95513;
		border-radius: 42rpx;
		text-align: center;
		line-height: 84rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 84rpx;
	}
}
</style>
